<template>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>薪资：{{ person.job.salary }}</h2>
    <button @click="person.age++">增长年龄</button>
    <button @click="person.job.salary++">修改薪资</button>
    <p style="text-align: left;border-top: 1px solid #000;">
        只要 watchEffect 的回调函数中依赖的数据发生变化，就重新执行 watchEffect 的回调函数
        <br>
        <br>
        watchEffect 监控默认开启 `immediate` 属性
        <br>
        <br>
        点击【修改薪资】会触发 watchEffect 的回调函数，但是点击【增长年龄】则不会


    </p>
</template>

<script lang="ts">
import { reactive, watchEffect } from 'vue'

export default {
    name: 'watchEffect',
    setup() {

        // 数据（响应式）
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                salary: 12
            }

        })
        watchEffect(
            () => {
                const salary = person.job.salary
                console.log('watchEffect 的回调函数被调用');
            })

        return {
            person,

        }
    }
} 
</script>
<style></style>